<template>
  <el-menu class="el-menu-vertical-demo"
           background-color="#304156"
           active-text-color="#409eff"
           text-color="#fff"
           router
           unique-opened
           :collapse="isCollage"
           :default-active="currentMenu">

    <h5 v-show="!isCollage">电商后台管理系统</h5>
    <h5 v-show="isCollage"><img src="../assets/images/logo/heima.png"
           alt=""> </h5>

    <el-menu-item :index="item.path"
                  v-for="item in noChildren"
                  :key="item.path"
                  @click="clickMenu(item)">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>

    <el-submenu :index="index+''"
                v-for="(item, index) in hasChildren"
                :key="index">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span>{{item.label}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path"
                      v-for="(subItem, subIndex) in item.children"
                      :key="subIndex"
                      @click="clickMenu(subItem)">
          <i :class="'el-icon-' + subItem.icon"></i>
          <span>{{subItem.label}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

  </el-menu>

</template>

<script>
export default {
  computed: {
    noChildren () {
      return this.asideMenu.filter(item => !item.children)
    },
    hasChildren () {
      return this.asideMenu.filter(item => item.children)
    },
    isCollage () {
      return this.$store.state.tab.isCollapse
    },
    currentMenu () {
      return this.$store.state.tab.currentMenu.path
    }
  },
  data () {
    return {
      // 激活的链接地址
      asideMenu: [
        {
          path: '/home',
          name: 'home',
          label: '首页',
          plabel: '',
          icon: 's-home'
        },
        // {
        //   path: '/video',
        //   name: 'video',
        //   label: '视频管理',
        //   plabel: '',
        //   icon: 'video-play'
        // },
        {
          path: '/safe',
          name: 'safe',
          label: '账号管理',
          plabel: '',
          icon: 'key'
        },
        {
          label: '用户管理',
          icon: 'user',
          children: [
            {
              path: '/users',
              name: 'users',
              plabel: '用户管理',
              label: '用户列表',
              icon: 'menu'
            }
          ]
        },
        {
          label: '权限管理',
          icon: 'postcard',
          children: [
            {
              path: '/roles',
              name: 'roles',
              plabel: '权限管理',
              label: '角色列表',
              icon: 'menu'
            },
            {
              path: '/rights',
              name: 'rights',
              plabel: '权限管理',
              label: '权限列表',
              icon: 'menu'
            }
          ]
        },
        {
          label: '商品管理',
          icon: 'shopping-bag-1',
          children: [
            {
              path: '/goods',
              name: 'goods',
              plabel: '商品管理',
              label: '商品列表',
              icon: 'menu'
            },
            {
              path: '/cates',
              name: 'cates',
              plabel: '商品管理',
              label: '商品分类',
              icon: 'menu'
            }
          ]
        },
        {
          label: '订单管理',
          icon: 'tickets',
          children: [
            {
              path: '/orders',
              name: 'orders',
              plabel: '订单管理',
              label: '订单列表',
              icon: 'document-copy'
            }
          ]
        },
        {
          label: '评论管理',
          icon: 'chat-line-square',
          children: [
            {
              path: '/comment',
              name: 'comment',
              plabel: '评论管理',
              label: '评论管理',
              icon: 'chat-line-square'
            }
          ]
        },
        {
          label: '操作日志',
          icon: 's-tools',
          children: [
            {
              path: '/operationrecord',
              name: 'operationrecord',
              plabel: '操作日志',
              label: '操作日志',
              icon: 's-tools'
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 点击菜单，vuex中保存菜单项
    clickMenu (item) {
      this.$store.commit('selectMenu', item)
      // 更改tab后更新tablist到sessionStorage
      window.sessionStorage.setItem('tabList', JSON.stringify(this.$store.state.tab.tabList))
      // 保存链接的激活状态
      window.sessionStorage.setItem('currentMenu', JSON.stringify(item))
    }
  },
  created () {
    if (JSON.parse(window.sessionStorage.getItem('currentMenu'))) {
      this.$store.state.tab.currentMenu = JSON.parse(window.sessionStorage.getItem('currentMenu'))
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  border: none;
  h5 {
    margin: 0;
    background: #2b2f3a;
    color: #fff;
    font-weight: normal;
    text-align: center;
    line-height: 50px;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
